<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="shortcut icon" href="../img/personIcon2.jpg">
	</head>

	<body>
		<div id="app">
			<main class="pab150">
				<section class="yudingOrder picBg">
					<div class="container">
						<div class="pad30 whiteBg radius20 mbt30">
							<div class="item">
								<h4 class="type">{{activity.activityname}}</h4>
								<div class="time" ></div>
							</div>
							<div class="item clearfix">
								<div class="name">取票方式</div>
								<div class="way">电子票</div>
							</div>
							<div class="item clearfix">
								<div class="name">预订人: </div>
								<input type="text" class="formInput" id="name" readonly="readonly"v-model="userAndCoupons.loginUser.realname" />
							</div>
							<div class="item clearfix">
								<div class="name">手机号：</div>
								<input type="text" class="formInput" id="mobile" v-model="user.phonenum" readonly="readonly"/>
							</div>
							<div class="item clearfix">
								<div class="item clearfix">
									<div class="name">选择日期</div>
									<!--								<input type="text" class="formInput" id="dateSelect" @change="findActivityNum()"/>-->
									<select class="formInput" id="ActivitySchedule" v-model="ActivityNumId" @change="findActivityNum()" >
										<option value="doNot" selected="selected">选择时间</option>
										<option v-for="ActivitySchedule in ActivitySchedules"  :value="ActivitySchedule.id" >{{ActivitySchedule.adate}}</option>
									</select>
								</div>
								<div>
									<div class="name">剩余可预约</div>
									<input readonly placeholder="已售罄" v-show="ActivityNum===0">
									<input readonly :value="ActivityNum" v-show="ActivityNum!==0"/>次
								</div>
							</div>
						</div>

						<div class="pad30 whiteBg radius20 mbt30">
							<div class="item clearfix">
								<div class="name">价格</div>
								<div class="price">￥{{activity.price}}</div>
							</div>
							<div class="item clearfix">
								<div class="name">我的余额</div>
								<div class="price">￥{{user.money}}</div>
							</div>
							<div class="item clearfix">
								<div class="name">优惠券：</div>
								<select class="formInput" id="Coupon" v-model="orders.couponid" @change="priceChange()">
									<option value="doNotUseCoupon">不使用优惠券</option>
									<option v-for="(coupon,i) in userAndCoupons.coupons"  :value="userAndCoupons.ucIds[i]" >{{coupon.name}}   剩余{{userAndCoupons.lastDays[i]}}天可用</option>
								</select>
							</div>

						</div>
						<div class="pad30 whiteBg radius20 mbt30">
							<h3 class="commonTitle"><i class="icon"></i>温馨提示</h3>
							<div class="commontext">
								{{activity.warning}}
							</div>
						</div>

					</div>
				</section>


			</main>


		<footer class="footer footer2 clearfix">
			<div class="container clearfix">
				<div class="price">总价<b>￥{{price}}</b></div>
				<div class="payBtn" id="payBtn" @click="ToTicketDe()">立即支付</div>
			</div>			
		</footer>
		</div>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/Mdate.js"></script>
		<script type="text/javascript" src="../js/iScroll.js"></script>
		<script type="text/javascript" src="../js/main.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../js/getParameter.js"></script>
		<script>
			let app6=new Vue({
				el:"#app",
				data:{
					activity:{},
					orders:{
						bookerid:"",
						booktime:"",
						introduce:"",
						couponid:"doNotUseCoupon",
					},
					user:{},
					zhekou:1,
					totals:0,
					userAndCoupons:{},
					price:0,
					ActivitySchedules:{},
					ActivityNum:0,
					ActivityNumId:"doNot",
				},
				methods:{
					priceChange(){
						let _this=this;
						if (this.userAndCoupons==="") _this.price=0;
						let ucouponid=this.orders.couponid
						_this.price = this.userAndCoupons.activity.price
						for (let i = 0; i < this.userAndCoupons.ucIds.length; i++) {
							let ucid = this.userAndCoupons.ucIds[i];
							if (ucid===ucouponid){
								let coupon = this.userAndCoupons.coupons[i]
								if (coupon.type===0) _this.price = _this.price*coupon.number
								else if (coupon.type===1) _this.price = _this.price - coupon.number;
							}
						}
						if (_this.price<0) _this.price = 0;
					},


					ToTicketDe(){

						const _this=this;
						let date =getParameter("date");
						_this.orders.price=_this.price;
						if(_this.ActivityNumId==="doNot")
						{layer.msg("请选择时间，否则无法下单")}
						else
						{
							if(_this.ActivityNum===0) {
								layer.msg("已售罄，请选择其他日期")
							}else {
								axios.post("/order/createdOrder",
										{orders: _this.orders})
										.then(function (response) {
											axios.get("/activity/deleteNum",{params: {id:_this.ActivityNumId,num:1}}).then(function (response){
												location.href="/userclient/index.html";
												app6.payMoney();
											})
										});

							}
						}
					},
					findActivityNum(){
						for(let i=0;i<this.userAndCoupons.asIds.length;i++){
							let asId=this.userAndCoupons.asIds[i];
							if(app6.ActivityNumId===asId){
								console.log(1);
								this.orders.booktime=this.userAndCoupons.activitySchedules[i].adate;
								let ticket=this.userAndCoupons.activitySchedules[i];
								app6.ActivityNum=ticket.freenum;
							}
						}
					},
					payMoney(){
						const _this=this;
						console.log(_this.user.id)
						_this.newMoney=_this.user.money-_this.price;
						_this.user.money=_this.newMoney;
						if (_this.newMoney>0){
							axios.post("/user/updateMoney",{user:_this.user})
									.then(function (response) {
										_this.user=response.data;
									});

							console.log(_this.newMoney)
						}else {
							alert("余额不足！")
						}

					},
				},
				created(){

					let aid = getParameter("id");
					axios.get("/activity/orderInfo/"+aid).then(function (res) {
						app6.userAndCoupons = res.data;
						app6.ActivitySchedules=res.data.activitySchedules;
					})


					const _this=this;
					let uid =getParameter("id");
					let dates =getParameter("date");
					console.log(dates)

					axios.get("/activity/queryById",
							{params:{id:uid}})
							.then(function (response) {
								_this.activity=response.data;
								_this.orders.objid=_this.activity.id;
								_this.orders.booktime=dates;
								_this.orders.objtype=1;
								_this.totals=_this.zhekou*_this.activity.price;
								_this.price=_this.totals;
							})

					axios.get("/user/findLogin")
							.then(function (response) {
								_this.user=response.data;
								_this.orders.bookerid=_this.user.id;
							})


				}
			})
		</script>
	</body>

</html>